<template>
  <view class="contet">
    <view class="title">欢迎登录AnswerSystem</view>
    <view class="main">
      <u-form
        :model="form"
        ref="uForm"
        :border-bottom="false"
        label-position="left"
        label-width="160"
        label-align="center"
      >
        <u-form-item label="账号" prop="telephone_email"
          ><u-input v-model="form.telephone_email"
        /></u-form-item>
        <u-form-item label="密码" prop="password"
          ><u-input v-model="form.password" type="password"></u-input
        ></u-form-item>
        <u-button @click="submit">登录</u-button>
        <u-button @click="register">注册账号</u-button>
      </u-form>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        telephone_email: "",
        password: "",
      },
      rules: {
        telephone_email: [
          {
            required: true,
            message: "请输入电话号码或邮箱",
            trigger: ["blur"],
            validator: (rule, value, callback) => {
              return this.$u.test.email(value) || this.$u.test.mobile(value);
            },
          },
        ],
        password: [
          {
            min: 8,
            required: true,
            message: "请输入密码",
            trigger: ["blur"],
            validator: (rule, value, callback) => {
              return this.$u.test.enOrNum(value);
            },
          },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          console.log("验证通过");
        } else {
          console.log("验证失败");
        }
      });
    },
    register() {
      this.$u.route({
        url: "pages/info/register/index",
      });
    },
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style></style>
